<template>
  <div style="padding: 20px;" class="管理员列表">
    <el-button type="success" class="el-icon-plus" @click="add"> 添加管理员</el-button>
    <div style="height: 520px;overflow-y: auto;">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="realname" label="姓名">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号码">
        </el-table-column>
        <el-table-column prop="dateLogin" label="登录时间">
        </el-table-column>
        <el-table-column prop="ipLogin" label="登录ip">
        </el-table-column>
        <el-table-column prop="isLock" label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.isLock" type="warning" round size="small">
              {{ scope.isLock | fmtIsLock }}</el-button>
            <el-button v-else type="success" plain size="small">
              {{ scope.isLock | fmtIsLock }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">{{ scope.row.date }}
            <span style="color: #409eff;margin-right: 4px;" @click="add">编辑</span>
            <span style="color: #ffa500;margin-right: 4px;" @click="chongzhi(scope.row)">重置密码</span>
            <span style="color: #ff0000;margin-right: 4px;" @click="disable(scope.row)">禁用</span>
            <span style="color: #ff0000;" @click="dele(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="danger" @click="deleteAll">批量删除</el-button>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog title="添加" :visible.sync="dialogFormVisible" :rules="rules" style="height:700px;">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="form.pwd"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="form.realname"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="用户编号" prop="name">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="角色" style="height: 400px; width: 100%; overflow: auto;">
          <label v-for="r in tableaddlist" :key="r.id">
            <input type="checkbox" v-model="r.falg">{{ r.name }}
          </label>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { tablelist, tableaddlist, gettableadd } from "@/api/manageList";
export default {
  data() {
    return {
      params: { page: 1, pageSize: 10 },
      currentPage: 1,
      total: 10,
      tableData: [
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      delete: [],

      dialogFormVisible: false,
      form: {
        id: '',
        pwd: '',
        realname: '',
        username: '',
        mobile: ''
      },
      formLabelWidth: '120px',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      },
      tableaddlist: []
    }

  },
  async mounted() {
    this.getList()
    this.tableadd()
  },
  methods: {
    submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm);
                    this.gettableadd()
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                        duration: "2000"
                    });
                    setTimeout(() => {
                        this.$router.push('/ManageList')
                    }, 2000);
                }
            });
        },

    async getList() {
      let { data: res } = await tablelist(this.params)
      // console.log(res);
      this.total = res.totalRow
      this.tableData = res.result
    },
    async tableadd() {
      let { data: res } = await tableaddlist()
      // console.log(res);
      this.tableaddlist = res
    },
    async gettableadd() {
      let { data: res } = await gettableadd(this.form)
      this.form = res
    },
    handleSelectionChange(val) {
      this.delete = val
    },
    deleteAll() {
      this.$confirm('删除无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // let {data:res} = await dele(this.delete.map(r=>{ return r.id}))
        // console.log(res);
        console.log(this.delete.map(r => { return r.id }));
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    disable(row) {
      this.$confirm('确定要禁用吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row);
        this.$message({
          type: 'success',
          message: '禁用成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        });
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val
      this.getList()
    },


    dele(row) {
      console.log(row);
      this.$confirm('删除无法恢复，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    add() {
      this.dialogFormVisible = true
    }
  },
  filters: {
    fmtIsLock(val) {
      if (val) return '禁用'
      else return "正常"
    }
  },
}
</script>
